<template>
  <a-card :bordered='false'>
    <a-tabs default-active-key="1" tab-position="top">
      <a-tab-pane key="1" tab="疫情日报">
        <!-- 搜索条件 -->
        <div class='table-page-search-wrapper'>
          <a-form layout='inline'>
            <a-row :gutter='48'>
              <a-col :md='8' :sm='24'>
                <a-form-item label='报表日期'>
                  <a-range-picker @change='onChange' v-model='timeValue' />
                </a-form-item>
              </a-col>

              <a-col :md='8' :sm='24'>
            <span class='table-page-search-submitButtons'>
              <a-button type='primary' icon='search' @click='loadData'>查询</a-button>
              <a-button type='primary' style='margin-left: 8px' icon='reload' @click='reload'>重置</a-button>
            </span>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class='table-operator'>
          <a-button @click='handleAdd' type='primary' icon='plus'>新增</a-button>
        </div>

        <!--table-->
        <a-spin :spinning='downLoading' tip=' 正在下载数据，请耐心等待'>
          <a-table
            :rowKey="record => record.ds"
            ref='table'
            size='middle'
            bordered
            :columns='columns'
            :dataSource='dataSource'
            :pagination='ipagination'
            @change='handleTableChange'
            :loading='loading'
          >
            <span slot='action' slot-scope='text, record'>
                  <a @click='handleEdit(record.ds)'> 编辑 </a>
                <a-divider type='vertical' />
            <a @click='handleDetail(record)'>预览</a>
            <a-divider type='vertical' />
            <a @click='loadDown(record.ds)'> 下载 <a-icon type='download' /></a>
          </span>
          </a-table>
        </a-spin>
      </a-tab-pane>
      <a-tab-pane key="2" tab="疫情周报">
        <admin-home-weekly></admin-home-weekly>
      </a-tab-pane>

    </a-tabs>

    <word-show-modal ref='detailModal'></word-show-modal>
  </a-card>
</template>

<script>
import ATextarea from 'ant-design-vue/es/input/TextArea'
import AInput from 'ant-design-vue/es/input/Input'
import ReportsEpidemicDailyService from '@/myService/ReportsEpidemicDailyService'
import WordShowModal from '@views/data-governance/smart-reports/epidemic-daily/components/WordShowModal'
import AdminHomeWeekly from '@views/data-governance/smart-reports/epidemic-weekly/AdminHome'
import moment from 'moment'

export default {
  components: {
    AInput,
    ATextarea,
    WordShowModal,
    AdminHomeWeekly
  },
  data() {
    return {
      timeValue: undefined,
      downLoading: false,
      // 查询参数
      queryParam: {
        beginDate: '',
        endDate: '',
        pageSize: 10,
        pageIndex: 1
      },
      /* 数据源 */
      dataSource: [],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) =>
            <span>{this.ipagination.pageSize * (this.ipagination.current - 1) + index + 1}</span>
        },
        {
          title: '日期',
          dataIndex: 'ds',
          align: 'center',
          customRender: (text) => text.toString().replace(/^(\d{4})(\d{2})(\d{2})$/, '$1-$2-$3')
        },
        {
          title: '工单数',
          align: 'center',
          dataIndex: 'total'
        },
        {
          title: '环比',
          align: 'center',
          dataIndex: 'annulus'
        },
        {
          title: '办结率',
          align: 'center',
          dataIndex: 'completionRate'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      /* table加载状态 */
      loading: false
      // 加载数据方法 必须为 Promise 对象

    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      this.dataSource = []
      this.ipagination.total = 0
      this.queryParam.pageSize = this.ipagination.pageSize
      this.queryParam.pageIndex = this.ipagination.current
      ReportsEpidemicDailyService.getEpidemicStatisticsHome(this.queryParam).then((res) => {
        if (res.success) {
          console.log( res.result.records)
          this.dataSource = res.result.records || res.result
          if (res.result.total) {
            this.ipagination.total = res.result.total
          }
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    reload() {
      this.queryParam = {
        beginDate: '',
        endDate: '',
        pageSize: 10,
        pageIndex: 1
      }
      this.ipagination.pageSize = 10
      this.ipagination.current = 1
      this.timeValue = undefined
      this.loadData()
    },
    onChange(date, dateString) {
      this.queryParam.beginDate = dateString[0].replace(/-/g, '')
      this.queryParam.endDate = dateString[1].replace(/-/g, '')
    },
    handleAdd() {
      let ds=moment(new Date()).format("YYYYMMDD");
      this.$router.push({path:'/report/admin-epidemic-daily-add',query:{"ds":ds}})
    },
    handleEdit(ds){
      this.$router.push({path:'/report/admin-epidemic-daily-add',query:{"ds":ds}})
    },
    handleTableChange(pagination) {
      this.ipagination.current = pagination.current
      this.ipagination.pageSize = pagination.pageSize
      this.loadData()
    },
    handleDetail(row) {
      this.$refs.detailModal.open(row.ds)
    },
    loadDown(ds) {
      this.downLoading = true
      ReportsEpidemicDailyService.generateWord(ds).finally(() => {
        this.downLoading = false
      })
    }
  }
}
</script>